<template>
  <div class="dialog-container">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="category"
        label="评估事项、内容与评分"
        align="center"
      >
        <template #default="{ row }">
          <div>{{ row.category }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="程度等级">
        <el-table-column label="可自理" align="center">
          <template #default="{ row, $index }">
            <span v-if="row.isEvaluation">{{ row.selfCare }}</span>
            <el-radio
              v-else
              v-model="row.selected"
              :label="row.selfCare"
              :value="row.selfCare"
              @click="radioChange($index, row.selfCare)"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="轻度依赖" align="center">
          <template #default="{ row, $index }">
            <span v-if="row.isEvaluation">{{ row.mildDependence }}</span>
            <el-radio
              v-else
              v-model="row.selected"
              :label="row.mildDependence === '--' ? 0 : row.mildDependence"
              :value="row.mildDependence"
              @click="radioChange($index, row.mildDependence)"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="中度依赖" align="center">
          <template #default="{ row, $index }">
            <span v-if="row.isEvaluation">{{ row.moderateDependence }}</span>
            <el-radio
              v-else
              v-model="row.selected"
              :label="row.moderateDependence"
              :value="row.moderateDependence"
              @click="radioChange($index, row.moderateDependence)"
              >{{ row.moderateDependence || 0 }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column label="不能自理" align="center">
          <template #default="{ row, $index }">
            <span v-if="row.isEvaluation">{{ row.cannotSelfCare }}</span>
            <el-radio
              v-else
              v-model="row.selected"
              :label="row.cannotSelfCare"
              :value="row.cannotSelfCare"
              @click="radioChange($index, row.cannotSelfCare)"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="判断评分" align="center" prop="selected">
        </el-table-column>
      </el-table-column>
    </el-table>

    <div class="text-center mt-20">
      总分: <span>{{ totalScore }}</span>
    </div>
    <div class="text-center mt-10">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="updateScore">保存</el-button>
    </div>
  </div>
</template>

<script>
/**
 * 评测指标的各项分值分别对应id
 */
 import http from "@/utils/request";
 import { ElMessage } from "element-plus";
const selectIdMap = {
  eatId: {
    0: "6",
    "--": "7",
    3: "8",
    5: "9",
  },
  washId: {
    0: "10",
    1: "11",
    3: "12",
    7: "13",
  },
  wearId: {
    0: "14",
    "--": "15",
    3: "16",
    5: "17",
  },
  toiletId: {
    0: "18",
    1: "19",
    5: "20",
    10: "21",
  },
  activityId: {
    0: "22",
    1: "23",
    5: "24",
    10: "25",
  },
};
export default {
  name: "ElderlySelfCareAssessment",
  props: {
    DialogDate: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tableData: [
        {
          isEvaluation: true,
          category: "进餐：使用餐具将饭菜送入口，咀嚼、吞咽等活动",
          selfCare: "独立完成",
          mildDependence: "--",
          moderateDependence: "需要协助，如切碎、搅拌食物等",
          cannotSelfCare: "完全需要帮助",
          selected: null,
        },
        {
          isEvaluation: false,
          category: "评分",
          selected: null,
          selectId: "eatId",
          selfCare: 0,
          mildDependence: "--",
          moderateDependence: 3,
          cannotSelfCare: 5,
        },
        {
          isEvaluation: true,
          category: "梳洗：梳头、洗脸、刷牙、剃须、洗澡等活动",
          selfCare: "独立完成",
          mildDependence: "能独立地洗头、梳头、洗脸、刷牙、剃须等;洗澡需协助",
          moderateDependence: "在协助下和适当时间内，能完成部分梳洗活动",
          cannotSelfCare: "完全需要帮助",
          selected: null,
        },
        {
          isEvaluation: false,
          category: "评分",
          selected: null,
          selectId: "washId",
          selfCare: 0,
          mildDependence: 1,
          moderateDependence: 3,
          cannotSelfCare: 7,
        },
        {
          isEvaluation: true,
          category: "穿衣：穿衣裤、袜子、鞋子等活动",
          selfCare: "独立完成",
          mildDependence: "--",
          moderateDependence: "需要协助，在适当的时间内完成部分穿衣",
          cannotSelfCare: "完全需要帮助",
          selected: null,
        },
        {
          isEvaluation: false,
          category: "评分",
          selected: null,
          selectId: "wearId",
          selfCare: 0,
          mildDependence: "--",
          moderateDependence: 3,
          cannotSelfCare: 5,
        },
        {
          isEvaluation: true,
          category: "如厕：小便、大便等活动及自控",
          selfCare: "不需要协助，可自控",
          mildDependence: "偶尔失禁，但基本上能如厕或使用便具",
          moderateDependence: "经常失禁，在很多提示和协助下尚能如厕或使用便具",
          cannotSelfCare: "完全失禁，完全需要帮助",
          selected: null,
        },
        {
          isEvaluation: false,
          category: "评分",
          selected: null,
          selfCare: 0,
          selectId: "toiletId",
          mildDependence: 1,
          moderateDependence: 5,
          cannotSelfCare: 10,
        },
        {
          isEvaluation: true,
          category: "活动：站立、室内行走、上下楼梯、户外活动等",
          selfCare: "独立完成所有活动",
          mildDependence: "借助较小的外力或辅助装置能完成站立、行走、上下楼梯等",
          moderateDependence:
            "借助较大的外力才能完成站立、行走，不能上下楼梯",
          cannotSelfCare: "卧床不起，活动完全需要帮助",
          selected: null,
        },
        {
          isEvaluation: false,
          category: "评分",
          selected: null,
          selectId: "activityId",
          selfCare: 0,
          mildDependence: 1,
          moderateDependence: 5,
          cannotSelfCare: 10,
        },
      ],
      backendData: null,
    };
  },
  methods: {
    populateTable(data) {
      this.tableData.forEach((row) => {
        if (row.selectId) {
          // 遍历 selectIdMap 查找匹配的选项值
          for (let key in selectIdMap[row.selectId]) {
            if (selectIdMap[row.selectId][key] == data[row.selectId]) {
              row.selected = key == "--" ? 0 : parseInt(key);
            }
          }
        }
      });
    },
    fetchData() {
      this.populateTable(this.DialogDate);
    },
    resetTableData() {
      this.tableData.forEach((row) => {
        row.selected = null; // 假设 selected 字段是用来标记选择状态的
      });
    },
    updateScore() {
      const { totalScore, tableData } = this;
     let resultMap = { totalScore };
      tableData
        .filter((v) => v.selectId)
        .forEach(
          ({ selectId, selected }) =>
            (resultMap[selectId] = selectIdMap[selectId][selected])
        );
       http.post("/health/saveOrUpdateScore/", resultMap).then((res) => {
       if(res.code === 200){
         ElMessage.success(res.message);
         resultMap=res.data;
         this.$emit("update", resultMap);
         console.log(resultMap);
         this.resetTableData();
       }else{
         ElMessage.error(res.message);
       }
      });
     
    },
    close() {
      this.$emit("close");
    },
    radioChange($index, val) {
      const { tableData } = this;
      tableData[$index - 1].selected = val === "--" ? 0 : val;
      console.log(tableData[$index - 1].selected);
      console.log($index);
    },
    objectSpanMethod({ row, columnIndex }) {
      if (columnIndex === 5) {
        if (row.isEvaluation) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
  computed: {
    totalScore() {
      return this.tableData
        .filter((row) => !row.isEvaluation)
        .reduce(
          (sum, row) =>
            sum +
            ([0, null, "--", undefined, ""].includes(row.selected)
              ? 0
              : row.selected),
          0
        );
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style scoped>
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.text-center {
  text-align: center;
}
.d-flex {
  display: flex;
}
.dialog-container {
  height: 80vh;
  overflow-y: auto;
}
.el-table th {
  background-color: #f5f7fa;
}
</style>
